<template>
	<view v-if="shenheStatus == 0" class="recharge">
		<view class="top-balance">
			<view class="flex-x-sb flex-y-center">
				<view>{{ $t("user.acount") }}</view>
				<view style="opacity: 0.8" @click="showPopup = true" class="flex-y-center">{{ $t("person.balanceInstructions")
          }}<i style="margin-left: 10rpx" class="iconfont icon-prompt"></i></view>
			</view>
			<view> {{ money }} </view>
		</view>

		<!-- 充值套餐 -->
		<view class="combo-box" v-if="list.length">
			<view class="combo-title">{{ $t("user.package") }}</view>
			<view class="item-box">
				<view :class="['item', active.id == item.id ? 'active' : '']" v-for="(item, index) in list" :key="index"
					@click="clickItem(item)">
					<view class="text-more-1">
						{{ item.pay_price * 1 + item.send_price * 1
            }}<text style="font-size: 30rpx">{{ $t("mdAdmin.canWith1") }}</text>
					</view>
					<view class="text-more-1">{{ $t("admin.salePrice") }}{{ item.pay_price * 1
            }}{{ $t("mdAdmin.canWith1") }}</view>
					<view class="text-more-1 send_integral" v-if="item.send_integral>0">
						赠{{stores.integral_name}}：{{ item.send_integral }}
					</view>
					<view class="text-more-1 send_integral" v-if="item.level_up_name">
						升级为{{ item.level_up_name }}
					</view>
				</view>
			</view>
		</view>

		<!-- 充值金额 -->
		<view class="input-box" v-if="type == '1'">
			<view class="input-title">{{ $t("person.rechargeAmount") }}</view>
			<view class="input">
				<view>￥</view>
				<view><u-input @focus="inputFocus" v-model="inputNum" placeholder=" " :custom-style="{
              background: 'none',
            }" type="digit"></u-input></view>
			</view>
		</view>

		<view v-if="type == '1' || list.length" class="submit flex-y-center flex-x-center" @click="onShowPayType">{{
      $t("person.immediately")
    }}</view>

		<u-popup v-model="showPopup" mode="center" border-radius="24">
			<view class="popup-box">
				<view>
					<view>{{ $t("person.balanceInstructions") }}</view>
					<view>{{ $t("user.serve") }}</view>
				</view>
				<view class="flex-y-center flex-x-center">
					<view @click="showPopup = false" class="flex-y-center flex-x-center">{{ $t("person.cancle") }}
					</view>
					<view @click="showPopup = false" class="flex-y-center flex-x-center">{{ $t("list.confirm") }}</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showPayType" mode="bottom" safe-area-inset-bottom border-radius="22">
			<view class="pay-way-page">
				<view class="page-content">
					<view class="page-header">
						<view>{{ $t("order.methods") }}</view>
						<image @click="showPayType = false" :src="asyncImgs.images.white_close_icon" alt=""
							mode="aspectFit">
						</image>
					</view>
					<view class="pay-way-list">
						<view class="pay-way-item" v-for="(item, index) in pay_type_list"
							@click="payTypeSelect(item.payment)" :key="index">
							<view class="pay-way-info">
								<i v-if="item.payment == 1 || item.payment == 101" class="icon-weixinzhifu iconfont"
									style="color: #09bb07; font-size: 54rpx"></i>
								<i v-else-if="item.payment == 2" class="icon-yinhangka1 iconfont"
									style="color: #34cb9b; font-size: 54rpx"></i>
								<i v-else-if="item.payment == 4" class="icon-zhifubao1 iconfont"
									style="color: #5a9ef7; font-size: 54rpx"></i>
								<text>{{ item.name }}</text>
							</view>

							<view class="way-status">
								<image v-if="pay_type == item.payment" :src="asyncImgs.images.choosed_red_icon" alt=""
									mode="aspectFit"></image>
								<view v-else></view>
							</view>
						</view>
					</view>

					<view class="confirm-section">
						<view @click="rechargeSubmit">{{ $t("list.confirm") }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from "@/components/shenhe/shenhe";
	import orderPay from "../../common/orderPay.js";
	import utils from '../../common/utils';
	const PAY_KEY = {
		WECHAT_PAY: 1,
		ALIPAY: 4,
	};
	export default {
		components: {
			Shenhe,
		},
		data() {
			return {
				// #ifdef MP-WEIXIN || APP-PLUS
				pay_type: "1",
				// #endif
				// #ifdef MP-ALIPAY
				pay_type: "4",
				// #endif
				money: "", //余额
				isGiving: -1,
				inputNum: "",
				list: [],
				useFoot: false,
				active: {},
				showPopup: false,
				showPayType: false,
				type: '0'
			};
		},

		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("title.recharge"),
			});
		},
		created() {
			const userInfo = uni.getStorageSync("userInfo");
			this.money = userInfo.money;
			this.getRechargeList();
		},
		onShow() {
			setTimeout(() => {
				try {
					this.useFoot = this.$utils.useFoot(this.controls);
				} catch (e) {}
			}, 500);
		},
		methods: {
			inputFocus() {
				this.active = {};
			},
			clickItem(item) {
				this.active = item;
				this.inputNum = item.pay_price;
			},
			rechargeSubmit: utils.debounce(async (that) => {
				let params = {
					send_price: 0,
					pay_price: 0,
					pay_type: that.pay_type,
				};
				// 输入验证
				var t =
					/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if (!t.test(that.inputNum)) {
					that.inputNum = that.$options.data().inputNum;
					return that.$utils.toast(that.$t("user.right"));
				}

				if (that.active.pay_price) {
					params.send_price = that.active.send_price;
					params.send_integral = that.active.send_integral;
					params.pay_price = that.active.pay_price;
					params.level_up = that.active.level_up;
					params.assign_member = that.active.assign_member;
					params.recharge_id = that.active.id;
				} else {
					params.pay_price = that.inputNum;
				}

				// #ifdef APP-PLUS
				params._from = "app";
				// #endif
				// #ifdef MP-WEIXIN || MP-ALIPAY
				params._from = "mini";
				// #endif
				try {
					const res = await that.$allrequest.user.recharge_submit(params, true);
					if (res.code == 0) {
						// #ifdef MP-ALIPAY
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res.data.trade_no,
							success: function(res) {},
							complete: function(res) {
								if (res.resultCode == 9000) {
									// uni.showToast({
									//   title: "支付成功",
									//   icon: "none",
									//   duration: 2000,
									// });
									// 此处不做处理
									uni.navigateTo({
										url: "/user/balance/balance",
									});
								} else {
									uni.showToast({
										title: "订单尚未支付",
										icon: "none",
										duration: 2000,
									});
								}
							},
						});
						// #endif
						// #ifndef MP-ALIPAY
						orderPay.paySubmit(
							res,
							"/user/balance/balance",
							PAY_KEY[that.pay_type]
						);
						// #endif
					} else {
						that.$utils.toast(res.msg);
					}
				} catch (e) {
					//TODO handle the exception
				}
			}, 500),
			async getRechargeList() {
				try {
					const res = await this.$allrequest.user.recharges_list({});
					this.list = res.data.list;
					this.type = res.data.balance.type
				} catch (e) {
					//TODO handle the exception
				}
			},
			onShowPayType() {
				// #ifdef MP-WEIXIN
				this.showPayType = true;
				// #endif

				// #ifndef MP-WEIXIN
				this.rechargeSubmit();
				// #endif
			},
			payTypeSelect(payment) {
				this.pay_type = payment;
			},
		},
		computed: {
			boxStyle() {
				return {
					paddBottom: this.useFoot ?
						"calc(env(safe-area-inset-bottom) + 100rpx)" :
						"0px",
				};
			},
			pay_type_list() {
				let arr = [];
				// #ifdef MP-WEIXIN
				if (this.stores.payment.adapay_wx?.value) {
					arr.push({
						name: "Adapay支付",
						payment: 101,
						icon: this.asyncImgs.images.wx_pay_icon,
					});
				}
				arr.push({
					name: this.$t("common.payMethod1"),
					payment: 1,
					icon: this.asyncImgs.images.wx_pay_icon,
				});
				// #endif

				return arr;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recharge {
		color: #262626;
		padding: 0 36rpx;
	}

	.top-balance {
		color: #fff;
		margin: 40rpx 0 40rpx;
		padding: 60rpx 40rpx 52rpx;
		background: #f0250e;
		box-shadow: 0px 6px 24px rgba(240, 37, 14, 0.3);
		opacity: 1;
		border-radius: 20rpx;

		>view:nth-child(1) {
			font-size: 24rpx;
		}

		>view:nth-child(2) {
			margin-top: 10rpx;
			line-height: 76rpx;
			font-size: 54rpx;
			font-weight: 600;
		}
	}

	.combo-box {
		.combo-title {
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 40rpx;
		}

		.item-box {
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 204rpx;
				height: 190rpx;
				color: #8c8c8c;
				background: #ffffff;
				border: 2rpx solid #f1f1f1;
				border-radius: 20rpx;
				text-align: center;

				>view:nth-child(1) {
					color: #f0250e;
					font-weight: 600;

					font-size: 48rpx;
					line-height: 66rpx;
				}

				>view:nth-child(2) {
					font-size: 24rpx;
				}

				.send_integral {
					font-size: 24rpx;
					padding-bottom: 10rpx;
				}
			}

			.active {
				color: #f0250e;
				border: 4rpx solid #f0250e;
			}

			.item:nth-child(3n + 2) {
				margin: 0 32rpx 40rpx;
			}
		}
	}

	.input-box {
		.input-title {
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 40rpx;
		}

		.input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;

			>view:nth-child(1) {
				font-size: 40rpx;
				font-weight: 600;
				transform: translateY(8rpx);
			}

			>view:nth-child(2) {
				flex: 1;
				width: 0;

				/deep/.u-input__input {
					font-size: 56rpx;
					font-weight: 600;
					height: 112rpx;
					color: #262626;
				}
			}
		}
	}

	.submit {
		margin-top: 80rpx;
		height: 88rpx;
		background: #f0250e;
		opacity: 1;
		border-radius: 120rpx;

		font-size: 32rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.popup-box {
		width: 600rpx;
		padding: 0 50rpx;

		>view:nth-child(1) {
			>view:nth-child(1) {
				line-height: 90rpx;
				margin-bottom: 24rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #262626;
			}

			>view:nth-child(2) {
				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #262626;
			}
		}

		>view:nth-child(2) {
			height: 180rpx;
			font-weight: 600;

			>view:nth-child(1) {
				width: 244rpx;
				height: 84rpx;
				border-radius: 42rpx;
				border: 2rpx solid #999999;
				font-size: 32rpx;
				color: #262626;
			}

			>view:nth-child(2) {
				margin-left: 14rpx;
				width: 244rpx;
				height: 84rpx;
				border-radius: 42rpx;
				font-size: 32rpx;
				color: #fff;
				background: #f0250e;
			}
		}
	}

	.pay-way-page {
		// width: 100%;
		// // min-height: 100vh;
		// position: fixed;
		// left: 0;
		// top: 0;
		// z-index: 111;

		// .page-bg {
		// 	width: 100%;
		// 	min-height: 100vh;
		// 	background-color: #3d3d3d;
		// 	opacity: 0.75;
		// }

		.page-content {
			width: 100%;
			// background: #ffffff;
			// border-radius: 22rpx 22rpx 0 0;
			padding-top: 30rpx;
			// position: absolute;
			// bottom: 0;

			.page-header {
				width: 100%;
				text-align: center;
				position: relative;
				margin-bottom: 34rpx;

				view {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #262626;
					line-height: 44rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 36rpx;
					top: 0;
					z-index: 11;
				}
			}

			.pay-way-list {
				width: 100%;
				padding-left: 36rpx;
				margin-bottom: 188rpx;

				.pay-way-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 36rpx 40rpx 0;
					border-bottom: 1px solid #f2f2f2;

					.pay-way-info {
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							display: block;
							margin-right: 22rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #262626;
							line-height: 44rpx;
						}
					}

					.way-status {
						view {
							width: 32rpx;
							height: 32rpx;
							background: #ffffff;
							border: 3rpx solid #8c8c8c;
							border-radius: 16rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
					}
				}
			}

			.confirm-section {
				width: 100%;
				background: #ffffff;
				box-shadow: 0 1rpx 0 0 #f2f2f2;
				padding: 12rpx 36rpx;

				view {
					width: 100%;
					height: 76rpx;
					background: linear-gradient(90deg, #ff4e18, #f32524);
					border-radius: 38rpx;
					text-align: center;
					line-height: 76rpx;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #ffffff;
				}
			}
		}
	}
</style>